<template>
  <div class="page-warp h-f bg-grey-200">
    <div class="m-content">
      <div class="m-warp">
        <div v-for="(item, index) in list.rows" :key="item['pso_id']" class="ps-rows">
          <div class="wrap-code">
            <div>
              {{ item['ivoCode'] }}
            </div>
            <div :class="['code-status', index === 0 ? 'active' : '']">待配料</div>
          </div>
          <div class="text-content">
            <div>
              <ul class="text-list line-h-lg">
                <li class="li-item">
                  <span class="title">配料人员：</span>
                  <span class="value">{{ item['bwaName'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">配料日期：</span>
                  <span class="value">{{ item['ivoOrgName'] }}</span>
                </li>
                <li class="li-item">
                  <span class="title">备注：</span>
                  <span class="value">{{ item['ivoPersonName'] }}</span>
                </li>
                <!-- <li class="li-item">
                  <span class="title">状态：</span>
                  <state-notifier :config="KEYS.IIO_RECIPE_STATE" :state="item['ivoState'] + ''" />
                </li> -->
              </ul>
            </div>
            <div>
              <button-circle type="primary" @click="additem(0)" v-if="!isview && !isadjust">
                去配料
              </button-circle>
            </div>
          </div>
        </div>

        <LoadingFooter
          :data="list.rows"
          :total="list.total"
          :loading="loadingStore.ILOADING"
          @load="loadMore"
          :h-offset="44"
        />
      </div>

      <div class="form-footer">
        <div class="footer-warp">
          <div class="footer__btn">
            <div class="btn">
              <button
                class="uni-btn"
                type="primary"
                @click="additem(0)"
                :disabled="loadingStore.ILOADING"
                :loading="loadingStore.ILOADING"
              >
                新增配料单
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <ConfirmModal v-model="dialog.del.show" :message="dialog.del.msg" @change="onDelete" />

    <uni-message-ex custom-nav />
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { debounce } from 'radash'
import { PageUtil } from '@/utils/PageUtil'
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'

import { useLoading } from '../../../store/LoadingStore'
import LoadingFooter from '../../../components/LoadingFooter.vue'
import { useStockResStore } from '../../../store/StockResulting'
import StateNotifier from '../../../components/StaticDictionary/StateNotifier.vue'
import { useStaticTypeDictionaries } from '../../../components/StaticDictionary/StaticTypeDictionaries'
import ConfirmModal from '../../../components/ConfirmModel/ConfirmModal.vue'
import { useMessage } from '../../../store/MessageStore'
import { StringUtils } from '../../../utils/StringUtils'
import ButtonCircle from '../../../components/ButtonCircle.vue'

const msgStore = useMessage()
const { KEYS } = useStaticTypeDictionaries()
const loadingStore = useLoading()
const stockResStore = useStockResStore()

const queryParams = reactive({
  limit: 1,
  size: 20
})

const list = reactive({
  rows: [],
  total: 0
})

const canDelete = function (item) {
  const { ivoState } = item || {}
  if (StringUtils.isEmptyOrNull(ivoState)) {
    return true
  }
  return [0].includes(+ivoState)
}

const searchList = function (e) {
  const { value = '' } = e || {}
  loadingStore.NEW_LIST()
  queryParams.limit = 1
  queryParams.ivoCode = value
  queryList()
}

const queryList = function () {
  debounceQuery()
}

const debounceQuery = debounce({ delay: 300 }, () => {
  loadingStore.SET_LOADING()

  stockResStore
    .getList({
      ...queryParams
    })
    .then((res) => {
      let { Rows = [], Total = 0 } = res || {}
      if (loadingStore.isLoadMore(list.rows, Total)) {
        console.log('concat')
        list.rows = list.rows.concat(Rows)
      } else {
        console.log('new rows')
        list.rows = Rows
      }
      list.total = Total
      loadingStore.FINISH_ALL()
      uni.stopPullDownRefresh()
    })
})

const loadMore = function () {
  if (loadingStore.ILOADING) {
    return
  }
  const { total = 0, rows = [] } = list
  if (loadingStore.hasMore(rows, total)) {
    queryParams.limit += 1
    debounceQuery()
  }
}

const viewForm = function (item) {
  PageUtil.addEvent(
    'material-res-formview',
    () => {
      queryList()
    },
    {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {
          ...item,
          __view: true
        }
      }
    }
  )
}

const dialog = reactive({
  del: {
    show: false,
    msg: '确定要删除吗?',
    row: {}
  }
})
const deleteForm = function (item) {
  dialog.del.show = true
  dialog.del.row = item
}

const onDelete = function (e) {
  if (!e) return
  const { ivoId: id } = dialog.del.row
  loadingStore.SET_LOADING()
  stockResStore
    .listDelete({
      ids: [id]
    })
    .then((res) => {
      msgStore.success('操作成功')
      searchList()
    })
}

const additem = function (item) {
  PageUtil.addEvent(
    'resulting-edit-formview',
    () => {
      queryList()
    },
    {
      route: '/pages/material/ingredient/fillForm',
      params: {
        row: {}
      }
    }
  )
}

const editForm = function (item) {
  PageUtil.addEvent(
    'material-in-formview',
    () => {
      queryList()
    },
    {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {
          ...item,
          __check: true
        }
      }
    }
  )
}

const adjustForm = function (item) {
  PageUtil.addEvent(
    'material-in-formview',
    () => {
      queryList()
    },
    {
      route: '/pages/stocks/query/result/formview',
      params: {
        row: {
          ...item,
          __adjust: true
        }
      }
    }
  )
}

onLoad((params) => {
  let { row } = PageUtil.parseParam(params)

  loadingStore.NEW_LIST()
  queryList()
})

onShow(() => {
  searchList()
})

onPullDownRefresh(() => {
  searchList()
})

onReachBottom(() => {
  loadMore()
})
</script>

<style lang="scss" scoped>
@import '@/assets/PageCommon.scss';

.li-item {
  display: flex;
}

.page-warp {
  .m-content {
    padding-bottom: 70px;

    .m-warp {
      background-color: #f2f2f2;
      .ps-rows {
        background: #fff;
        margin: 20rpx;
        padding: 20rpx;
        .wrap-code {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .code-status.active {
          color: #266feb;
        }
      }
    }
    .text-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .fil-btn {
        border: 1px solid #266feb;
        color: #266feb;
        padding: 3px 12px;
        font-size: 26rpx;
        height: 52rpx;
        line-height: 52rpx;
        margin-top: 60rpx;
        border-radius: 26rpx;
      }
    }
    .prod-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      .footer-btn {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
